<template>
  <div class="big-box">
    <div class="box">
      <div class="center">
        <form action="/mylogin" onsubmit="return false" class="left">
          <div class="up">
            <p class="one">新用户注册</p>
            <span>
              <router-link to="/mylogin" class="two">直接登录</router-link>
            </span>
          </div>
          <div class="item">
            <label> 用户名: </label>
            <input
              v-on:input="utest"
              v-model="username"
              type="text"
              placeholder="请输入用户名"
            />
            <span :class="umsg">{{ uError }}</span>
          </div>
          <div class="item">
            <label>登录密码:</label>
            <input
              v-on:input="ptest"
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
            <span :class="pmsg">{{ pError }}</span>
          </div>
          <div class="item">
            <label>确认密码:</label>
            <input
              v-on:input="rptest"
              v-model="repassword"
              type="password"
              placeholder="请确认密码"
            />
            <span :class="rpmsg">{{ rError }}</span>
          </div>
          <div class="item">
            <label>邮箱:</label>
            <input
              v-on:input="etest"
              v-model="email"
              type="email"
              placeholder="请输入邮箱地址"
            />
            <span :class="emsg">{{ eError }}</span>
          </div>
          <div class="item">
            <label>手机号:</label>
            <input
              v-on:input="mtest"
              v-model="mphone"
              type="phone"
              placeholder="请输入您的手机号"
            />
            <span :class="mmsg">{{ mError }}</span>
          </div>
          <div class="register">
            <button type="submit" class="register-btn" @click="test">
              注册
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script></script>

<script>
export default {
  data() {
    return {
      umsg: "",
      pmsg: "",
      rpmsg: "",
      emsg: "",
      mmsg: "",
      username: "",
      password: "",
      repassword: "",
      email: "",
      mphone: "",
      uError: "",
      pError: "",
      rError: "",
      eError: "",
      mError: "",
    };
  },
  methods: {
    utest: function () {
      var ut = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
      );
      if (this.username == "") {
        this.uError = "用户名不能为空!";
        this.umsg = "msg-default";
      } else if (this.username.length < 3 || this.username.length > 12) {
        this.uError = "用户名为3-5个字符!";
        this.umsg = "msg-error";
      } else if (ut.test(this.username)) {
        this.uError = "用户名不能含有特殊字符!";
        this.umsg = "msg-error";
      } else {
        this.uError = "用户名可以使用!";
        this.umsg = "msg-success";
      }
    },
    ptest: function () {
      var pt = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$");

      if (this.password == "") {
        this.pError = "密码不能为空!";
        this.pmsg = "msg-default";
      } else if (!pt.test(this.password)) {
        this.pError = "密码必须为6-12位字母、数字的组合";
        this.pmsg = "msg-error";
      } else {
        this.pError = "密码可以使用!";
        this.pmsg = "msg-success";
      }
    },
    rptest: function () {
      var pt = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$");
      if (this.repassword !== this.password) {
        this.rError = "两次密码不一致!";
        this.rpmsg = "msg-error";
      } else if (!pt.test(this.password)) {
        this.rError = "密码必须为12位字母、数字的组合";
        this.rmsg = "msg-error";
      } else {
        this.rError = "密码已确认!";
        this.rpmsg = "msg-success";
      }
    },
    etest: function () {
      var et = new RegExp(
        "^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.(com|cn|net)$"
      );

      if (this.email == "") {
        this.eError = "邮箱不能为空!";
        this.emsg = "msg-default";
      } else if (!et.test(this.email)) {
        this.eError = "邮箱格式不符合要求!";
        this.emsg = "msg-error";
      } else {
        this.eError = "邮箱可以使用!";
        this.emsg = "msg-success";
      }
    },
    mtest: function () {
      var mt = new RegExp(
        "^((13[0-9])|(14[5,6,7,9])|(15[^4])|(16[5,6])|(17[0-9])|(18[0-9])|(19[1,8,9]))\\d{8}$"
      );
      if (this.mphone == "") {
        this.mError = "手机号码不能为空!";
        this.mmsg = "msg-default";
      } else if (!mt.test(this.mphone)) {
        this.mError = "手机号码格式不正确!";
        this.mmsg = "msg-error";
      } else {
        this.mError = "手机号码可以使用!";
        this.mmsg = "msg-success";
      }
    },
    test: function () {
      if (
        this.umsg === "msg-success" &&
        this.pmsg === "msg-success" &&
        this.emsg === "msg-success" &&
        this.mmsg === "msg-success"
      ) {
        const { username, password, email, mphone } = this; //对象解构
        console.log(username, password, email, mphone);
        //POST请求, 特点是 路径 与 参数分开
        const url = "http://127.0.0.1:3000/v1/library/reg";
        const params = `name=${username}&password=${password}&email=${email}&phone=${mphone}`;
        console.log(url, params);
        this.axios.post(url, params).then((res) => {
          console.log(res); // 结果不是200的, 肯定是 params抄错了, 自己查
          if (res.data.code == 200) {
            alert("恭喜! 注册成功");
            this.$router.push("/mylogin");
            console.log(this.$router);
          } else {
            alert("糟糕! 注册失败, 小马哥为你点赞哦");
          }
        });
      } else {
        alert("请按照提示完善信息!");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}
.big-box {
  width: 1200px;
  height: 100%;
  margin: 0 auto;

  background-image: url("../assets/IMG/bg/book5.jpg");
}
.box {
  width: 800px;
  height: 600px;
  // background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(20%);
  // background-color: rgba(0, 0, 0, 0.1);
}
.center {
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1);

  .left {
    border: 1px solid black;

    width: 650px;
    height: 550px;

    margin-left: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .up {
      width: 350px;
      height: 60px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;

      .one {
        color: white;
        font-size: 20px;
        text-decoration: none;
      }
      .two {
        color: white;
        font-size: 12px;
        text-decoration: none;
      }
    }
  }
}

.center {
  // margin-top: 10px;
  form {
    color: white;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    input {
      width: 260px;
      height: 30px;
      padding-left: 10px;
      border-radius: 5px;
      outline: none;
    }
    .register {
      border: 1px solid black;
      width: 65%;
      text-align: center;

      .register-btn {
        // width: 285px;
        height: 40px;
        padding: 5px 10px;
        background-color: #46aaff;
        width: 235px;
        border-radius: 5px;
        color: white;
      }
    }
  }
}

.item {
  margin-bottom: 20px;
}
.item > label {
  margin-right: 10px;
  display: inline-block;
  width: 90px;
  text-align: right;
  color: #ffffff;
  font-size: 14px;
}

.item > span {
  margin-left: 10px;
  width: 270px;
  color: #fff;
  padding: 5px;
  border-radius: 2px;
}

.msg-default {
  background-color: #999;
}
.msg-error {
  background-color: #d00;
}
.msg-success {
  background-color: #0d0;
}
</style>
